<%@ page import="fiszkas.Fiszka" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main">
    <title>Learning...</title>
</head>

<body>

<div style="padding: 5px;">

    <div style="padding: 5px; background-color: lightgray">
        <span><g:fieldValue bean="${fiszka}" field="polish"/>
        %{--(<g:fieldValue bean="${fiszka}" field="synonims"/>)</span>--}%

        <h3 style="margin: 10px" ><span id="answer"><g:fieldValue bean="${fiszka}" field="english"/></span></h3>
    </div>

    <g:link action="correct" params="[fiszkaId: fiszka.id]">
        <div style="float: left; margin: 5px; padding: 10px; background-color: lightgreen;">I knew it!</div>
    </g:link>

    <g:link action="incorrect" params="[fiszkaId: fiszka.id]">
        <div style="float: left; clear: right; margin: 5px; padding: 10px; background-color: lightcoral;">Wrong guess</div>
    </g:link>

    <script>
        $('#answer').effect("highlight", {}, 800);
    </script>

    <div id="image" style="padding: 5px; width: 160px; height: 180px"/>
    <script>
        $.ajax({
            url: '${createLink(action:'fetchImg', params: [fiszkaId: fiszka.id ])}',
            dataType: 'json',
            contentType: "application/json",
            success: function (data) {
                $('#image').html('<img id="img" src="' + data.src + '" style="display: none; padding: 0px; margin: 0px; width: 150px; height: 150px" onclick="$(\'#img\').fadeOut(\'fast\')" />');
                $('#img').fadeIn(1000);
            },
            error: function (e) {
                console.log(e);
            }
        });
    </script>

</div>

</body>
</html>
